<template>
       <div id="login_view" v-loading="loading"  element-loading-text="拼命加载中">
             <transition name="logintransition">
                 <el-form label-position="right" id="login_form" label-width="5em" :rules="rules" :model="loginForm" ref="loginForm" v-show="formShow">
                    <div><img id="login_image" src="~/static/img/login.png"></div>
                    <el-form-item label="用户名" prop="username">
                        <el-input v-model="loginForm.username" placeholder="用户名" autofocus="true" suffix-icon="iconfont kesn-denglu"></el-input>
                    </el-form-item>
                    <el-form-item label="密码" prop="password">
                        <el-input v-model="loginForm.password"  placeholder="密码" suffix-icon="iconfont kesn-yidongduanicon-" type="password"></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="info" plain style="margin-right:3em;" @click="resetForm('loginForm')">重置&nbsp;<i class="iconfont kesn-clean el-icon-arrow-left"></i></el-button>
                        <el-button type="primary" @click="actionLogin()">登录&nbsp;<i class="iconfont kesn-denglu el-icon-arrow-right"></i></el-button>
                    </el-form-item>
                </el-form>
             </transition>
           
       </div>
</template>
<style>

    .logintransition-enter-active, .logintransition-leave-active {
        transition: opacity .5s;
    }
    .logintransition-enter, .logintransition-leave-to /* .fade-leave-active below version 2.1.8 */ {
        opacity: 0;
    }

  #login_view {
      margin: 0%;
      padding: 0%;
      width: 100%;
      height: 100%;
      background-color: rgb(4, 42, 71);
      position: absolute;
  }
  #login_form{
      background-color: aliceblue;
      position: absolute;
      top: 50em;
      left: 50em;
      width: 25em;
      height: auto;
      margin-top: -40em;
      margin-left: -22em;
      border-radius: 0.5em;
      padding: 2em;
  }
  #login_button{
      position: absolute;
      right: 1em;
  }
  #login_image{
      width: 7em;
      height: auto;
      margin-bottom: 1em;
      position:relative;
      left: 8em;
  }
 
 
</style>

<script>
import Vue from 'vue';
import ElementUI,{ Loading } from 'element-ui';
import axios from 'axios';
import 'element-ui/lib/theme-chalk/index.css';
import '~/assets/iconfont/iconfont.css';
Vue.use(ElementUI);



export default {

    mounted() {
        let _this = this;
        this.$nextTick(()=>{
            this.formShow = 'ok';
            setTimeout(
                ()=>_this.loading = false,1000
            )
        });
        
        
    },
    data(){
        return{
            loading:true,
            formShow:false,
            loginForm:{
                username:'',
                password:''
            },
             rules:{
                username:[
                    {require:true,message:'用户名必填',trigger:'blur'},
                    {min:1,max:20,message:'用户名字数应在1~20之间',trigger:'blur'}
                ],
                password:[
                    {require:true,message:'密码必填',trigger:'blur'},
                    {min:1,max:20,message:'密码字数应在1~20之间',trigger:'blur'}
                ]
            },
           
        }
    },
    
    methods:{
        actionLogin(){
            let _this = this;
            axios.get('http://localhost:3031/login',{
                params:{
                    username:_this.loginForm.username,
                    password:_this.loginForm.password
                }
               
            }).then(response=>{
                if(response.data.err != 0){
                    _this.$message.error(response.data.content);
                }else{
                    this.$router.push({path:"/main"});
                    this.$store.commit('login');
                }
            }).catch(error=>{
                _this.$message.error('未知错误！');
                console.error(error);
            });
        },
        resetForm(formName) {
            this.$refs[formName].resetFields()
        }
    }
   
   
}
</script>



